function demoObj() {
  const obj = {
    name: "黑哥",
    age: 18,
  };

  /* 基于obj创建代理对象 巫蛊之术 */
  var objProxy = new Proxy(
    // 被代理的真身
    obj,

    /* handler 操作objProxy代理时的处理器 */
    {
      // objProxy.key = value
      // objProxy.gender = "男"
      set(target, prop, value) {
        // target=obj prop=gender value=男
        console.log("set", target, prop, value);

        // 直接在真身（被代理对象target）上操作 obj.key = value
        target[prop] = value;

        // 返回操作结果：true=操作成功
        return true;
      },

      // delete objProxy.age
      // target=被代理的真身=obj
      // prop=要删除的属性=age
      deleteProperty(target, prop) {
        console.log("deleteProperty", target, prop);

        // 操作真身 在真身上删除属性
        delete target[prop];

        // 返回操作结果：成功
        return true;
      },

      // console.log(objProxy.name)
      // target=被代理的对象=obj
      // prop=要查询的属性=name
      get(target, prop) {
        console.log("get", target, prop);
        return target[prop];
      },
    }
  );

  /* 想操作obj 直接操作其代理对象objProxy */
  objProxy.gender = "男"; //意欲在Obj身上增加一个key

  delete objProxy.age; //意欲在obj身上删除age属性

  objProxy.gender = "女";
  console.log(objProxy.name);

  console.log(obj);
}
// demoObj();

function demoArr() {
  const arr = ["张三", "李四", "foo", "bar"];

  var arrProxy = new Proxy(
    // 要代理的数据真身
    arr,

    /* 操作代理arrProxy时的处理器hander */
    {
      set(target, prop, value) {
        console.log("set", target, prop, value);
        target[prop] = value;
        return true;
      },

      deleteProperty: function (target, prop) {
        console.log("deleteProperty", target, prop);
        delete target[prop];
        return true;
      },

      get(target, prop) {
        console.log("get", target, prop);
        return target[prop];
      },
    }
  );

  // 追加元素
  // arrProxy.push("王二麻子");

  // 删除元素
  // console.log(arrProxy.pop());//bar

  // 修改元素
  // arrProxy[0] = "张三丰";

  // 查询元素
  console.log(arrProxy[0]);

  // 查看数据真身
  console.log(arr);
}
demoArr();
